<template>
  <button class="g-button link" @click="$emit('click')" :class="buttonClass(iconPosition)">
    <g-icon v-if="loading" class="loading" icon="loading"></g-icon>
    <g-icon v-if="icon &&!loading" :icon="icon"></g-icon>
    <span>
      <slot></slot>
    </span>
  </button>
</template>

<script >
import Vue from "vue";
import gIcon from "./Icon.vue";

export default {
  components: {
    gIcon
  },
  props: {
    iconPosition: {
      type: String,
    },
    icon: {
      type: String
    },
    loading: {
      type: Boolean
    }
  },
  methods: {
    buttonClass(iconPosition) {
      return { [`icon-${iconPosition}`]: iconPosition };
    }
  }
};
</script>

//script lang="ts">
//   import Vue from "vue";
//   import {Component, Prop} from "vue-property-decorator";
//   import gIcon from "./Icon.vue";

//   @Component({
//     components: {gIcon}
//   })
//   export default class Button extends Vue {
//     @Prop({type: String}) readonly iconPosition: string;
//     @Prop({type: String}) readonly icon: string;
//     @Prop({type: Boolean,default:false}) readonly loading: boolean;

//   }
//
//</script>

<style lang="scss" scoped>
$button-height: 36px;
$font-size: 14px;
$button-bg: white;
$button-active-bg: #eee;
$border-radius: 4px;
$color: #333;
$border-color: #999;
$border-hover-color: #666;
.g-button {
  height: $button-height;
  font-size: $font-size;
  padding: 0 1em;
  color: $color;
  border-radius: $border-radius;
  background-color: $button-bg;
  border: 1px solid $border-color;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle; //出现inline元素不对齐使用该属性
  &:hover {
    border-color: $border-hover-color;
  }

  &:active {
    background-color: $button-active-bg;
  }

  &:focus {
    outline: none; /*被选中时的样式*/
  }

  > .icon {
    margin-right: 6px;
  }

  &.icon-right {
    > .icon {
      order: 2;
      margin-left: 6px;
      margin-right: 0;
    }
  }
}

span {
  line-height: 36px; //解决文字与icon无法居中的问题
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loading {
  animation: spin 2s infinite linear;
}
</style>